<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->
<style>
    .ng-table th.sortable div {
        /* css-3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }
    table {
        table-layout: fixed;
        width: 100%
    }
</style>
<div class="row-fluid">
    <div class="box span12">
        <div class="box-header">
            <h2 openlmis-message="report.title.cce.storage.capacity"><i class="icon-edit"></i><span class="break"></span></h2>

            <div class="box-icon">
                <a id="pdf-button" ng-show="filterForm.$valid" href="#list" ng-click="exportReport('PDF');"
                   class='btn-small btn-info'>PDF</a>
                <a id="xls-button" ng-show="filterForm.$valid" href="#list" ng-click="exportReport('xls')"
                   class='btn-small btn-info'>Excel</a>
            </div>
        </div>

        <div class=row-fluid>
            <div class="app-form" style="padding: 5px;">
                <form ng-submit="filterGrid()"  name="filterForm" novalidate>
                    <div filter-container class="clearfix">
                        <program-filter class="form-cell horizontalFilters"></program-filter>
                        <facility-level-filter class="form-cell horizontalFilters"></facility-level-filter>
                    </div>
                </form>
            </div>
        </div>
        <div class="row-fluid">
            <table class="table table-bordered" ng-show="datarows == undefined || datarows.length == 0">
                <tr>
                    <td>No data to show under selected filters</td>
                </tr>
            </table>
            <div ng-show="datarows.length > 0">
                <div client-side-sort-pagination class="pull-right legend">Page: {{tableParams.page}},
                    Showing records {{ ((tableParams.page - 1) * tableParams.count) + 1 }}
                    to {{ tableParams.page*tableParams.count > tableParams.total ? tableParams.total : tableParams.page*tableParams.count }}
                    of {{tableParams.total}}
                </div>
                <div style="clear: right;">
                    <table ng-show="datarows.length > 0" class="table-bordered table table-striped" ng-table="tableParams">
                        <thead>
                        <tr>
                            <th openlmis-message="label.demography"></th>
                            <th openlmis-message="label.refrigerator.capacity" colspan="3"></th>
                            <th openlmis-message="label.freezer.capacity" colspan="3"></th>
                        </tr>
                        <tr>
                            <th openlmis-message="label.site"></th>
                            <th openlmis-message="label.refrigerator.capacity.current"></th>
                            <th openlmis-message="label.refrigerator.capacity.required"></th>
                            <th openlmis-message="label.refrigerator.capacity.gap"></th>
                            <th openlmis-message="label.freezer.capacity.current"></th>
                            <th openlmis-message="label.freezer.capacity.required"></th>
                            <th openlmis-message="label.freezer.capacity.gap"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="row in datarows">
                            <td data-title="getLocalMessage('label.site')">{{row.siteName}}</td>
                            <td data-title="getLocalMessage('label.refrigerator.capacity.current')" class="number">{{row.refrigeratorCapacityCurrent}}</td>
                            <td data-title="getLocalMessage('label.refrigerator.capacity.required')" class="number">{{row.refrigeratorCapacityRequired}}</td>
                            <td data-title="getLocalMessage('label.refrigerator.capacity.gap')" class="number">{{row.refrigeratorCapacityGap}}</td>
                            <td data-title="getLocalMessage('label.freezer.capacity.current')" class="number">{{row.freezerCapacityCurrent}}</td>
                            <td data-title="getLocalMessage('label.freezer.capacity.required')" class="number">{{row.freezerCapacityRequired}}</td>
                            <td data-title="getLocalMessage('label.freezer.capacity.gap')" class="number">{{row.freezerCapacityGap}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>